<template>
    <div style="height:100%;width:100%;text-align:left;">
        <div ref="basicMapbox" :style="mapSize"></div>
    </div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
// import {guid2} from './uuid' // 引用js方法用{}
// import proj4 from 'proj4'

export default {
  name: 'MapboxMap',
  props: {
    mapWidth: {
      type: String
    },
    mapHeight: {
      type: String
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    this.init()
  },
  created () {
    this.map = null
  },
  methods: {
    // 初始化
    init () {
      mapboxgl.accessToken = 'pk.eyJ1IjoibWFyb3N0emd4IiwiYSI6ImNqY2xmamF1ODA4d3YyeG8zZHhvNmJtazAifQ.HZmoxlx91c9unbKOE18jpA'
      this.map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        style: 'mapbox://styles/marostzgx/cjclflua90i1e2rmfcetrg3ht',
        center: [70.996, 31.035], // starting position [lng, lat]
        zoom: 4.79, // starting zoom
        maxZoom: 10,
        minZoom: 1
      })
    },
    zoomIn () {
      this.map.setZoom(this.map.getZoom() + 1)
    },
    zoomOut () {
      this.map.setZoom(this.map.getZoom() - 1)
    },
    addLayer () {
      this.map.addSource('maine', {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [
              [
                [-67.13734351262877, 45.137451890638886],
                [-66.96466, 44.8097],
                [-68.03252, 44.3252],
                [-69.06, 43.98],
                [-70.11617, 43.68405],
                [-70.64573401557249, 43.090083319667144],
                [-70.75102474636725, 43.08003225358635],
                [-70.79761105007827, 43.21973948828747],
                [-70.98176001655037, 43.36789581966826],
                [-70.94416541205806, 43.46633942318431],
                [-71.08482, 45.3052400000002],
                [-70.6600225491012, 45.46022288673396],
                [-70.30495378282376, 45.914794623389355],
                [-70.00014034695016, 46.69317088478567],
                [-69.23708614772835, 47.44777598732787],
                [-68.90478084987546, 47.184794623394396],
                [-68.23430497910454, 47.35462921812177],
                [-67.79035274928509, 47.066248887716995],
                [-67.79141211614706, 45.702585354182816],
                [-67.13734351262877, 45.137451890638886]
              ]
            ]
          }
        }
      })
      this.map.addLayer({
        'id': 'maine',
        'type': 'fill',
        'source': 'maine',
        'layout': {},
        'paint': {
          'fill-color': '#088',
          'fill-opacity': 0.8
        }
      })
    }
  },
  computed: {
    mapSize () {
      let styleObj = {
        width: this.mapWidth,
        height: this.mapHeight
      }
      return styleObj
    }
  }
}
</script>

<style>
    @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css');
    .mapboxgl-canvas{
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

  .mapboxgl-ctrl-logo{
    display: none !important;
  }
  .mapboxgl-ctrl-attrib{
    display: none !important;
  }
</style>

<style scoped>

</style>
